import React from "react";
import {Button, Icon, Layout, Popconfirm} from "antd";
import UserList from "../sys/user/UserList";
import {Route, BrowserRouter as Router} from 'react-router-dom';
import SideMenu from '../../components/SideMenu/index';

const {Header, Sider, Content, Footer} = Layout;
const localStorage = window.localStorage;

class Home extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            name: "",
            loginStatus: "inline",
            toLogin:"none"
        };
    }

    componentWillMount(){
        this.changeState()
    }

    changeState = () =>{
        const token = localStorage.getItem("token")
        const username = localStorage.getItem("username");
        if(username == '' || username == null){
            this.setState({
                loginStatus:"none",
                toLogin:"inline",
            })
            this.props.history.push("/login")
        }else{
            this.setState({
                name: username
            })
        }
    }

    logout = () =>{
        localStorage.clear();
        this.setState({
            name:"",
            loginStatus:"none",
            toLogin:"inline",
        })
        this.props.history.push("/login")
    }

    render() {

        return (
            <div>
                <Layout hasSider={true} style={{maxHeight: '100vh', display: "flex", width: '100%', clear: 'both'}}>
                    <Router>
                    <Sider trigger={null} collapsible>
                        <a href={'/index'}>
                            <div className="logo" style={{fontSize:"23px",marginTop:"20px"}}>时政平台管理系统</div>
                        </a>
                        <SideMenu changeState={this.changeState}/>
                    </Sider>
                    <Layout style={{flex: 1}}>
                        <Header style={{background: '#fff', padding: 0}}>
                            <div data-flex="main:center cross:center"
                                 style={{display: 'inline-block', height: '100%', marginLeft: '10px', width: '400px'}}>
                            </div>
                            <div style={{float: "right"}}>
                                <table style={{cellSpacing: "0", cellPadding: "0"}}>
                                    <tbody>
                                    <tr>
                                        <td style={{paddingRight: '10px', display: this.state.loginStatus}}>{this.state.name} 欢迎你</td>
                                        <td style={{paddingRight: '20px', display: this.state.toLogin}}><a href="/login">未登录</a></td>
                                        <td style={{paddingRight: '15px', display: this.state.loginStatus}}>
                                            <Popconfirm placement={"leftTop"} title={"您确定退出系统吗？"} onConfirm={this.logout} okText={"确定"} cancelText={"取消"}>
                                            <a>退出登录 <Icon type="logout"/></a></Popconfirm></td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>

                        </Header>
                        <Content  style={{
                            margin: '5px 0px',
                            padding: '10px',
                            background: '#fff',
                            minHeight: 1200,
                        }}>
                            <Route path="/userList" component={UserList}/>
                            <Route path="/index" component={
                                props => {
                                    return (
                                        <div style={{
                                            textAlign: 'center',
                                            height: '400px',
                                            width: '100%',
                                            lineHeight:'400px',
                                            background:""
                                        }}>
                                            <h1 style={{fontSize: '50px'}}>欢迎来到时政管理平台</h1>
                                        </div>)
                                }
                            }/>
                        </Content>
                        <Footer>
                            <div style={{fontSize:20}}>这是王焘写的，谁也不准动！</div>
                        </Footer>
                    </Layout>
                    </Router>
                </Layout>
            </div>
        );
    }
}

export default Home;